<template>
	<view>
		<view class="text-tianxie">
			<u--text text="请填写你要找回的密码的账号" size="20px"></u--text>
		</view>
		<view class="view-form">
			<u-form labelPosition="left" ref='myForm' :model="userInfo">
				<u-form-item label="+86>" prop="phone" borderBottom>
					<u--input v-model="userInfo.phone" border="none" placeholder="请输入手机号" @change="inputChange"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-page__button-item">
			<u-button text="提交" size="normal" type="primary" @click="nextWalk" :disabled="disabled2"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法的手机号!'))
			}
			return {
				userInfo: {
					phone: '' //手机号
				},
				disabled2: false, //按钮状态
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					]
				}
			}
		},
		onLoad() {
				this.disabled2 = true
			},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			//点击下一步跳转页面进行获取验证码
			nextWalk() {
				console.log(this.userInfo.phone)
					uni.navigateTo({
						url: '/pages/getpassword/getPhoenCode?phone='+this.userInfo.phone,
					})
			},
			inputChange(e){
				this.disabled2 = false
			}
		}
	}
</script>

<style>
	.text-tianxie {
		margin-left: 80rpx;
		margin-top: 100rpx;
	}

	.view-form {
		width: 600rpx;
		margin-top: 30rpx;
		margin-left: 75rpx;
	}

	.u-page__button-item {
		width: 600rpx;
		margin-left: 70rpx;
		margin-top: 60rpx;
	}
</style>
